<!DOCTYPE html>
<html lang="zh">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>学习助手</title>
    <link rel="stylesheet" type="text/css" href="./bootstrap/css/bootstrap.min.css">

    <link rel="stylesheet" type="text/css" href="./css/style.css">
    <link rel="icon" href="./img/logo.png" type="image/png">
</head>
<style>
    .title_label {
        left: 8px;
        top: 10px;
        width: 100%;
        height: 19px;
        color: rgba(255, 255, 255, 1);
        font-size: 20px;
        text-align: left;
        font-family: PingFangSC-bold;
    }

    .header_main {
        width: 100%;
        margin: auto;
        background-image: url(./img/head_bg.png);
        background-position: top -140px right 0px;
        height: auto;
        padding: 10px;
        background-size: cover;
        background-size: 100%;
        background-repeat: no-repeat;
        color: dimgray;

    }

    .workStyle>li {
        float: left;
        margin-left: 10px;
        color: #fff;
        font-weight: 700;
    }

    #recordsListDiv {
        margin-top: 80px;
        font-size: medium;
        width: 100%;
    }


    #pswdInputForm>label {
        margin-top: 20px;
    }

    .record-item {
        display: flex;
        flex-direction: column;
        /* 将内部的span元素按列排列 */
        align-items: flex-start;
        /* 左对齐 */
        padding: 10px 0;
        border-bottom: 1px solid #ddd;
    }

    .record-item span.score-value {
        color: red;
    }
</style>

<body id="mainAPP" class="header_main">
    <header id="home">

        <ul class="workStyle">
            <li>
                <!-- 今日，参数是当前时间往后退1天，所以参数天1 -->
                <button class="btn btn-success" onclick="window.location.href='/home.html'">个人信息 </button>

            </li>
            <li>
                <!-- 今日，参数是当前时间往后退1天，所以参数天1 -->
                <button class="btn btn-warning" onclick="window.location.href='/records.html'">加分记录 </button>

            </li>
            <li>
                <!-- 7天，参数是当前时间往后退7天，所以参数填7 -->
                <button class="btn btn-secondary" onclick="window.location.href='/fill.html'">填写加分 </button>
            </li>
        </ul>
    </header>
    <!-- 用户列表 div -->
    <div id="recordsListDiv">

    </div>
    <!-- 分页导航栏 -->

    <div style="position:fixed; bottom: 0px;left: 0; width: 100%;   background-color: #17ad74; " id="bottomBox">
        <div style="color: white; text-align: center;" id="userinfo">2022计算机网络技术四班姜玉印，学号：220320204005</div>
    </div>
    <script type="text/javascript" src="./js/md5.js"></script>
    <script src="./bootstrap/js/bootstrap.min.js"></script>
    <script>
        getUserInfo()
        function getUserInfo() {
            //从浏览器的本地缓存中拿数据
            let userinfo = localStorage.getItem("userinfo");
            userinfo = JSON.parse(userinfo);

            var requestOptions = {
                method: 'GET',
                redirect: 'follow'
            };

            fetch("/v1/records/chaxunsn?sn=" + userinfo.Sn, requestOptions)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('异常 ' + response.statusText);
                    }
                    return response.json(); 
                })
                .then(data => {
                    // 处理服务器返回的数据
                    let recordsListDiv = document.getElementById('recordsListDiv');
                    let allhtml = '';

                    if (data.Data && Array.isArray(data.Data)) {
                        data.Data.forEach(record => {
                            // 解析日期时间字符串
                            let date = new Date(record.Createtime);
                            // 格式化日期时间为本地字符串（可以根据需要调整格式）
                            let formattedDate = date.toLocaleString();

                            // 构建HTML字符串
                            allhtml += `<div class="record-item">
                            <span>原因：${record.Comments}</span>
                            <span>得分：<span class="score-value">${record.Record}</span></span>
                            <span>时间：${formattedDate}</span>
                        </div>`;
                        });
                    } else {
                        allhtml = '<div>没有记录</div>';
                    }

                    recordsListDiv.innerHTML = allhtml;
                })
                .catch(error => {
                    console.error('操作出现问题:', error);
                });
        }
    </script>
</body>

</html>